import React, { Component } from 'react'
import top from './img/bg.png'
import logo from './img/logo.png'
import topay from './img/toPay.png'
import topush from './img/toPush.png'
import tohave from './img/toHave.png'
import have from './img/have.png'
import after from './img/after.png'
import vip from './img/vip.png'
import integral from './img/integral.png'
import ceoshare from './img/ceo-share.png'
import member from './img/member.png'
import co from './img/img_1/collection.png'
import address from './img/img_1/address.png'
import invoice from './img/img_1/invoice.png'
import customer from './img/img_1/customer.png'
import question from './img/img_1/question.png'
import set from './img/img_1/set.png'
import commission from './img/img_1/commission.png'
import './index.scss'
const Me = () => {
    return (
        <div className='containe'>
            {/* 用户中心头部 */}
            <div>
                <img src={top} alt={top} style={{ width: '100%' }} />
                <div className='logo_top'>
                    <img src={logo} alt={logo} />
                    <span className='login_tex'>登录／注册</span>
                </div>
                <div className='bag'>
                    <div className='bag-one'>
                        <div className='bag-number'>0</div>
                        <span>优惠券</span>
                    </div>
                    <div className='bag-one'>
                        <div className='bag-number'>0</div>
                        <span>积分</span>
                    </div>
                    <div className='bag-one'>
                        <div className='bag-number'>0</div>
                        <span>余额</span>
                    </div>
                </div>
            </div>
            {/* 旺旺会员 */}
            <div className='vip_title'>
                <div className='vip_logo'></div>
                <span className='card-bar'></span>
                <div className='card-but'>立即开通</div>
            </div>
            {/* 我的订单 */}
            <div className='box-order'>
                <div className='order-fir'>
                    <span className='order-fir-name'>我的订单</span>
                    <div className='img-right width-full height-full'>
                        <span style={{ display: 'inline-block' }} className='order-fir-left'>全部订单</span>
                        <div className='order-fir-right'></div>
                    </div>
                </div>
                <div className='order-sec'>
                    <div className='order-bag'>
                        <div className='order-bag-img'><img src={topay} alt={topay} /></div>
                        <div className='order-bag-txt'>待支付</div>
                    </div>
                    <div className='order-bag'>
                        <div className='order-bag-img'><img src={topush} alt={topush} /></div>
                        <div className='order-bag-txt'>待发货</div>
                    </div>
                    <div className='order-bag'>
                        <div className='order-bag-img'><img src={tohave} alt={tohave} /></div>
                        <div className='order-bag-txt'>待收货</div>
                    </div>
                    <div className='order-bag'>
                        <div className='order-bag-img'><img src={have} alt={have} /></div>
                        <div className='order-bag-txt'>已收货</div>
                    </div>
                    <div className='order-bag'>
                        <div className='order-bag-img'><img src={after} alt={after} /></div>
                        <div className='order-bag-txt'>退款/售后</div>

                    </div>
                </div>
            </div>
            {/* 会员 积分 推广 礼卡 */}
            <div className='box-order'>
                <div className='order-sec' style={{ marginTop: '-10px' }}>
                    <div className='order-bag' style={{ marginTop: '20px' }}>
                        <div className='order-bag-img'><img src={member} alt={member} /></div>
                        <div className='order-bag-txt'>旺旺会员</div>
                    </div>
                    <div className='order-bag' style={{ marginTop: '20px' }}>
                        <div className='order-bag-img'><img src={integral} alt={integral} /></div>
                        <div className='order-bag-txt'>积分商城</div>
                    </div>
                    <div className='order-bag' style={{ marginTop: '20px' }}>
                        <div className='order-bag-img'><img src={ceoshare} alt={ceoshare} /></div>
                        <div className='order-bag-txt'>推广店铺</div>
                    </div>
                    <div className='order-bag' style={{ marginTop: '20px' }}>
                        <div className='order-bag-img'><img src={vip} alt={vip} /></div>
                        <div className='order-bag-txt'>旺礼卡</div>

                    </div>
                </div>
            </div>
            {/* 收藏 地址 */}
            <div className='box-order'>
                <div className='order-sec' style={{ marginTop: '-10px' }}>
                    <div className='order-bag' style={{ marginTop: '20px' }}>
                        <div className='order-bag-img'><img src={co} alt={co} /></div>
                        <div className='order-bag-txt'>我的收藏</div>
                    </div>
                    <div className='order-bag' style={{ marginTop: '20px' }}>
                        <div className='order-bag-img'><img src={address} alt={address} /></div>
                        <div className='order-bag-txt'>我的地址</div>
                    </div>
                    <div className='order-bag' style={{ marginTop: '20px' }}>
                        <div className='order-bag-img'><img src={invoice} alt={invoice} /></div>
                        <div className='order-bag-txt'>我的发票</div>
                    </div>
                    <div className='order-bag' style={{ marginTop: '20px' }}>
                        <div className='order-bag-img'><img src={customer} alt={customer} /></div>
                        <div className='order-bag-txt'>联系客服</div>
                    </div>
                </div>
                <div className='order-sec' style={{ marginTop: '-10px' }}>
                    <div className='order-bag' style={{ marginTop: '20px' }}>
                        <div className='order-bag-img'><img src={question} alt={question} /></div>
                        <div className='order-bag-txt'>常见问题</div>
                    </div>
                    <div className='order-bag' style={{ marginTop: '20px' }}>
                        <div className='order-bag-img'><img src={set} alt={set} /></div>
                        <div className='order-bag-txt'>系统设置</div>
                    </div>
                    <div className='order-bag' style={{ marginTop: '20px' }}>
                        <div className='order-bag-img'><img src={commission} alt={commission} /></div>
                        <div className='order-bag-txt'>业绩提成</div>
                    </div>
                    <div className='order-bag' style={{ marginTop: '20px' }}>

                    </div>
                </div>
            </div>
            <div className='domain' >版权所有 沪ICP备15010261号-2</div>
        </div>
    )
}
export default Me
